<template>
  <div class="detail">
    <div class="image">
      <el-image
        :src="`${$Imgurl}/api/public/showImg/${book.picture}`"
      ></el-image>
    </div>

    <div class="content">
        <p>书名：{{book.name}}</p>
        <h4>作者：{{book.author}}</h4>
        <h5>出版社：{{book.publisher}}</h5>
    </div>

    <ul class="bottom">
      <li>
        <van-icon name="chat-o" size="2em" />
        <h3>客服</h3>
      </li>
      <li>
        <van-icon name="cart-o" size="2em" />
        <h3>购物车</h3>
      </li>
      <li>加入购物车</li>

      <li @click="show = true">立即购买</li>
    </ul>


    <van-popup
  v-model:show="show"
  closeable
   round
  position="bottom"
  :style="{ height: '30%' }"
/>
  </div>
</template>

<script>
import { mapState } from "vuex";

export default {
  name: "BookDetail",
  data() {
    return {
        show:false
    };
  },
  methods: {


  },

  computed: {
    ...mapState("detail", ["book"]),
  },
  mounted() {},
  created() {},
};
</script>

<style scoped>
/* 全局样式 */
* {
  margin: 0;
  padding: 0;
  list-style: none;
  font-weight: normal;
}

.bottom {
  position: fixed;
  bottom: 0;
  height: 1.5rem;
  width: 100%;
  background-color: white;
  display: flex;
  align-items: center;
  text-align: center;
  width: 98%;
  margin: 0 1%;
}

.bottom li:nth-child(1),
.bottom li:nth-child(2) {
  width: 15%;
  color: gray;
  font-size: 0.3rem;
}

.bottom li:nth-child(1) {
  border-right: 1px solid ghostwhite;
}

.bottom li:nth-child(1) h3,
.bottom li:nth-child(2) h3 {
  margin-top: 0.1rem;
}

.bottom li:nth-child(3),
.bottom li:nth-child(4) {
  width: 35%;
  height: 1.5rem;
  line-height: 1.5rem;
  color: white;
  font-size: 0.45rem;
  background-color: #ff976a;
}

.bottom li:nth-child(4) {
  background-color: #ff4444 !important;
}

.image {
  height: 8rem;
  width: 100%;
}

.image .el-image {
  width: 100%;
  height: 100%;
}

.content{
    width: 94%;
    height: 3rem;
    margin: 10px 3%;
    background-color: white;
    border-radius: 0.1rem 0.1rem 0 0;
}

.content p{
  font-size: 0.5rem;
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  margin: 0.1rem 0;
}

.content h4 , .content h5{
    font-size: 0.4rem;
}
</style>
